<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/master.xhtml">

<ui:define name="content">
	
		<p:wizard style="width:100%" nextLabel="Siguiente" backLabel="Atrás">


			<p:tab id="salonTab" title="Nombre">
				<p:panel header="Nombre">
					<p:messages />
					<h:panelGrid columns="2" cellpadding="3" columnClasses="label, value">
						<h:outputText value="Nombre del Salón:" />
						<p:inputText value="#{salonBean.salon.nombreSalon}" />
					</h:panelGrid>
					<br />
					<p:separator />
					<br />
					<h:outputText value="Fotos" styleClass="letra" />
					<br />
					<h:outputText value="Seleccione las fotos del salón. Tambien las puede arrastrar al cuadro." />
					<br />
					<br />
					<p:fileUpload mode="advanced" dragDropSupport="true" label="Seleccionar" uploadLabel="Subir"
						fileUploadListener="#{salonBean.handleFileUpload}" auto="false" cancelLabel="Cancelar" multiple="true"
						update="messages" sizeLimit="10000000" fileLimit="5" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

					<p:growl id="messages" showDetail="true" />
				</p:panel>
			</p:tab>

			<p:tab id="domicilio" title="Domicilio y Teléfono">
				<p:panel header="Domicilio y Teléfono">
					<h:panelGrid columns="2" cellpadding="3" columnClasses="align_top, align_top">

						<p:fieldset id="domicilioSet" legend="Domicilio" toggleable="true" toggleSpeed="500" collapsed="false"
							style="width: 40%;">
							<h:panelGrid columns="2" cellpadding="3">
								<h:outputLabel value="País:" />
								<p:selectOneMenu id="selectPais" converter="paisConverter" value="#{salonBean.selectedPais}" effect="fade"
									var="p" filter="true" filterMatchMode="startsWith" panelStyle="width:180px" style="width:160px">

									<f:selectItems var="pais" value="#{salonBean.listPaises}" itemLabel="#{pais.nombrePais}" itemValue="#{pais}" />
									<p:column>
										<h:outputText value="#{p.nombrePais}" />
									</p:column>
									<p:ajax event="change" update="selectProv" listener="#{salonBean.cambiarComboProvincia}" />
								</p:selectOneMenu>

								<h:outputLabel value="Provincia:" />
								<p:selectOneMenu id="selectProv" converter="provinciaConverter" value="#{salonBean.provinciaSelected}"
									effect="fade" var="pr" filter="true" filterMatchMode="startsWith" panelStyle="width:180px" style="width:160px">

									<f:selectItems var="prov" value="#{salonBean.listProvincia}" itemLabel="#{prov.nombreProvincia}"
										itemValue="#{prov}" />
									<p:column>
										<h:outputText value="#{pr.nombreProvincia}" />
									</p:column>
									<p:ajax event="change" update="selectLoc" listener="#{salonBean.cambiarComboLocalidad}" />
								</p:selectOneMenu>

								<h:outputLabel value="Localidad:" />
								<p:selectOneMenu id="selectLoc" converter="localidadConverter" value="#{salonBean.localidadSelected}"
									effect="fade" var="lo" filter="true" filterMatchMode="startsWith" panelStyle="width:180px" style="width:160px">

									<f:selectItems var="loc" value="#{salonBean.listLocalidad}" itemLabel="#{loc.nombreLocalidad}"
										itemValue="#{loc}" />
									<p:column>
										<h:outputText value="#{lo.nombreLocalidad}" />
									</p:column>
									<p:ajax event="change" update="selectBarrio" listener="#{salonBean.cambiarComboBarrio}" />
								</p:selectOneMenu>

								<h:outputLabel value="Barrio:" />
								<p:selectOneMenu id="selectBarrio" converter="barrioConverter" value="#{salonBean.domicilio.barrio}"
									effect="fade" var="ba" filter="true" filterMatchMode="startsWith" panelStyle="width:180px" style="width:160px">

									<f:selectItems var="bar" value="#{salonBean.listBarrio}" itemLabel="#{bar.nombreBarrio}" itemValue="#{bar}" />
									<p:column>
										<h:outputText value="#{ba.nombreBarrio}" />
									</p:column>
								</p:selectOneMenu>

								<h:outputLabel value="Calle:" />
								<p:inputText value="#{salonBean.domicilio.calle}" style="width:200px"></p:inputText>
								<h:outputLabel value="Número:" />
								<p:inputText value="#{salonBean.domicilio.numero}" style="width:100px"></p:inputText>
								<h:outputLabel value="Piso:" />
								<p:inputText value="#{salonBean.domicilio.piso}" style="width:100px"></p:inputText>

							</h:panelGrid>
						</p:fieldset>

						<p:fieldset id="telefono" legend="Teléfono" toggleable="true" toggleSpeed="500" collapsed="false"
							style="width: 40%;">

							<h:panelGrid columns="2" cellpadding="3">
								<h:outputLabel value="Tipo de teléfono:" />

								<p:selectOneMenu id="comboTipoTel" converter="tipotelefonoConverter" value="#{salonBean.tipoTelefonoSelected}"
									effect="fade" var="tt">

									<f:selectItems var="tipotel" value="#{salonBean.listTipoTelefono}" itemLabel="#{tipotel.nombre}"
										itemValue="#{tipotel}" />
									<p:column>
										<h:outputText value="#{tt.nombre}" />
									</p:column>
								</p:selectOneMenu>

								<h:outputLabel value="Código de área:" />
								<p:inputText value="#{salonBean.telefonoSalon.codigoArea}" />

								<h:outputLabel value="Número de Teléfono:" />
								<p:inputText value="#{salonBean.telefonoSalon.numeroTelefono}" />
							</h:panelGrid>

							<br />
							<p:commandButton value="Agregar" id="btnAgregarTelefono" icon="ui-icon-disk" process="@this,telefono"
								update="tablaTelefonos" action="#{salonBean.agregarTelefonoSeleccionado}" />
							<br />

							<p:separator id="separatorTel1" />

							<p:dataTable id="tablaTelefonos" var="tel" value="#{salonBean.listTelefonoSalon}" selection=""
								rowKey="#{tel.idTelefono}" emptyMessage="Tabla vacía.">

								<p:column headerText="Tipo teléfono">
									<h:outputText value="#{tel.tipotelefono.nombre}" />
								</p:column>
								<p:column headerText="Código de área">
									<h:outputText value="#{tel.codigoArea}" />
								</p:column>
								<p:column headerText="Número Teléfono">
									<h:outputText value="#{tel.numeroTelefono}" />
								</p:column>
								<p:column style="width:70px;text-align: center" headerText="Eliminar">

									<p:commandButton process="tablaTelefonos" update=":#{p:component('tablaTelefonos')}" icon="ui-icon-close"
										title="View" action="#{salonBean.eliminarTelefono}">
										<f:setPropertyActionListener value="#{tel}" target="#{salonBean.telefonoSalonSelected}" />

									</p:commandButton>

								</p:column>

							</p:dataTable>

						</p:fieldset>
					</h:panelGrid>

				</p:panel>
			</p:tab>

			<p:tab id="tipoEventos" title="Tipos de Eventos">
				<p:panel header="Tipos de Eventos">
					<p:messages />
					<h:outputLabel value="Tipo de Evento:" />

					<p:pickList id="PojoPickList" value="#{salonBean.tiposEventos}" var="tipoEvento" effect="scale"
						itemValue="#{tipoEvento}" itemLabel="#{tipoEvento.nombreTipoEvento}" showSourceControls="false"
						showTargetControls="false" showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains"
						converter="tipoeventoConverter">

						<p:ajax event="transfer" listener="#{salonBean.onTransfer}" />

						<p:column style="width:75%;">
							<h:outputText value="#{tipoEvento.nombreTipoEvento}" />
						</p:column>
					</p:pickList>

				</p:panel>
			</p:tab>

			<p:tab id="caracteristicas" title="Características">
				<p:panel header="Características">
					<h:panelGrid columns="2" cellpadding="3">
						<h:outputLabel value="Característica:" />

						<p:selectOneMenu id="comboCaract" converter="caracteristicaConverter" value="#{salonBean.caracteristicaSelected}"
							effect="fade" var="ca" filter="true" filterMatchMode="startsWith">

							<f:selectItems var="car" value="#{salonBean.listCaracteristicas}" itemLabel="#{car.nombreCaracteristica}"
								itemValue="#{car}" />
							<p:column>
								<h:outputText value="#{ca.nombreCaracteristica}" />
							</p:column>
						</p:selectOneMenu>
						<!-- 						<h:outputLabel value="Descripción:" /> -->
						<!-- 						<p:inputTextarea value="#{salonBean.prueba}" required="false" /> -->
					</h:panelGrid>

					<br />
					<!-- 					<h:outputLabel value="Fotos:" /> -->
					<!-- 					<br /> -->

					<!-- 					<p:fileUpload mode="advanced" dragDropSupport="true" label="Seleccionar" uploadLabel="Subir" cancelLabel="Cancelar" -->
					<!-- 						multiple="true" update="" sizeLimit="10000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" /> -->


					<br />
					<p:commandButton value="Agregar" id="ajax" icon="ui-icon-disk" process="@this,caracteristicas" update="caractDT"
						action="#{salonBean.agregarCaracteristicaSeleccionada}" />
					<br />

					<p:separator id="separator2" />

					<p:dataTable id="caractDT" var="ca" value="#{salonBean.listCaracteristicasSeleccionadas}" selection=""
						rowKey="#{ca.id}" emptyMessage="Tabla vacía.">

						<p:column headerText="Característica">
							<h:outputText value="#{ca.caracteristica.nombreCaracteristica}" />
						</p:column>

						<p:column style="width:70px;text-align: center" headerText="Eliminar">
							<p:commandButton process="caractDT" update=":#{p:component('caractDT')}" icon="ui-icon-close" title="View"
								action="#{salonBean.eliminarCaracteristica}">
								<f:setPropertyActionListener value="#{ca}" target="#{salonBean.caracteristicaxsalonSeleccionadas}" />
							</p:commandButton>
						</p:column>
						<!-- 
						<p:column style="width:70px;text-align: center"
							headerText="Eliminar">
							<p:commandButton update="" oncomplete="" icon="ui-icon-close"
								title="View">
								<f:setPropertyActionListener value="" target="" />
								<p:confirm header="Confirmation" message="Are you sure?"
									icon="ui-icon-alert" />
							</p:commandButton>

							<p:confirmDialog global="true" showEffect="fade"
								hideEffect="fade">
								<p:commandButton value="Yes" type="button"
									styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
								<p:commandButton value="No" type="button"
									styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
							</p:confirmDialog>

						</p:column>
 -->
					</p:dataTable>



				</p:panel>
			</p:tab>

			<p:tab id="disp" title="Disponibilidad">
				<p:panel header="Disponibilidad Inicial">
					<h:outputText value="Seleccione la Disponibilidad Inicial en el calendario." />
					<br />
					<br />
					<h:panelGrid columns="2" cellpadding="3" columnClasses="align_top, align_top">
						<h:outputLabel value="Fecha Desde:" />
						<h:outputLabel value="Fecha Hasta:" />

						<p:calendar id="fechaDesde" value="#{salonBean.fechaDesde}" mode="inline" navigator="true" locale="es" />
						<p:calendar id="fechaHasta" value="#{salonBean.fechaHasta}" mode="inline" navigator="true" locale="es" />
					</h:panelGrid>
					<br />
				</p:panel>
			</p:tab>

			<p:tab id="confirm" title="Confirmación">
				<p:panel header="Confirmación">
					<h:outputText value="Nombre Del Salón:" styleClass="letra" />
					<p:spacer width="10" />
					<h:outputText value="#{salonBean.salon.nombreSalon}" />
					<br />
					<p:separator />
					<br />

					<h:outputText value="Domicilio:" styleClass="letra" />
					<br />
					<br />

					<h:panelGrid columns="2" cellpadding="3">
						<h:outputText value="Pais: " />
						<h:outputText value="#{salonBean.selectedPais.nombrePais}" />
						<h:outputText value="Provincia: " />
						<h:outputText value="#{salonBean.provinciaSelected.nombreProvincia}" />
						<h:outputText value="Localidad: " />
						<h:outputText value="#{salonBean.localidadSelected.nombreLocalidad}" />
						<h:outputText value="Barrio: " />
						<h:outputText value="#{salonBean.domicilio.barrio.nombreBarrio}" />
						<h:outputText value="Calle: " />
						<h:outputText value="#{salonBean.domicilio.calle}" />
						<h:outputText value="Número: " />
						<h:outputText value="#{salonBean.domicilio.numero}" />
						<h:outputText value="Piso: " />
						<h:outputText value="#{salonBean.domicilio.piso}" />
					</h:panelGrid>
					<p:separator />
					<br />

					<h:outputText value="Teléfonos: " styleClass="letra" />
					<br />
					<br />
					<p:dataList value="#{salonBean.listTelefonoSalon}" var="tel" type="ordered">
				        #{tel.tipotelefono.nombre} : #{tel.codigoArea} - #{tel.numeroTelefono}
    				</p:dataList>
					<p:separator />
					<br />

					<h:outputText value="Tipos de Eventos: " styleClass="letra" />
					<br />
					<br />
					<p:dataList value="#{salonBean.tiposEventos.target}" var="te" type="unordered">
        					#{te.nombreTipoEvento}
    					</p:dataList>
					<br />
					<p:separator />
					<br />

					<h:outputText value="Características: " styleClass="letra" />
					<br />
					<br />
					<p:dataList value="#{salonBean.listCaracteristicasSeleccionadas}" var="ca" type="unordered">
        					#{ca.caracteristica.nombreCaracteristica} - #{ca.descripcionCaracteristica}
    					</p:dataList>

					<p:separator />
					<br />

					<h:outputText value="Disponibilidad: " styleClass="letra" />
					<br />
					<br />
					<h:panelGrid columns="2" cellpadding="3">
						<h:outputText value="Fecha desde: " />
						<h:outputText value="#{salonBean.fechaDesde}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>

						<h:outputText value="Fecha Hasta: " />
						<h:outputText value="#{salonBean.fechaHasta}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>

					</h:panelGrid>
					<p:separator />
					<br />

					<p:commandButton value="Registrar" action="#{salonBean.guardarSalon}" styleClass="ui-priority-primary" />
				</p:panel>
			</p:tab>
		</p:wizard>


	<script type="text/javascript">
		PrimeFaces.locales["es"] = {
			closeText : "Cerrar",
			prevText : "Anterior",
			nextText : "Siguiente",
			monthNames : [ "Enero", "Febrero", "Marzo", "Abril", "Mayo",
					"Junio", "Julio", "Agosto", "Septiembre", "Octubre",
					"Noviembre", "Diciembre" ],
			monthNamesShort : [ "Ene", "Feb", "Mar", "Abr", "May", "Jun",
					"Jul", "Ago", "Sep", "Oct", "Nov", "Dic" ],
			dayNames : [ "Domingo", "Lunes", "Martes", "Miércoles", "Jueves",
					"Viernes", "Sábado" ],
			dayNamesShort : [ "Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab" ],
			dayNamesMin : [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
			weekHeader : "Semana",
			firstDay : 0,
			isRTL : false,
			showMonthAfterYear : false,
			yearSuffix : "",
			timeOnlyTitle : "Solo hora",
			timeText : "Tiempo",
			hourText : "Hora",
			minuteText : "Minuto",
			secondText : "Segundo",
			currentText : "Fecha actual",
			ampm : false,
			month : "Mes",
			week : "Semana",
			day : "Día",
			allDayText : "Todo el día"
		};
	</script>

		</ui:define>
	</ui:composition>


